<html>
<head>
	<title>操作页面</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<script src="/js/vue/vue.min.js"></script>
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/laypage/laypage.js" charset="utf-8"></script>
	<script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<style>
	.posi{
		margin-left: 40%;
	}
</style>
<body>
		<!-- <table id="center" border="1px" bordercolor="#aaa" cellspacing="0" style="margin:0 auto;"> -->
		<table id="center" class="table table-bordered">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>密码</th>
					<th>地址</th>
					<th>操作</th>
				</tr>
				<tr class="active" v-for="(item,index) in result">
					<td>{{item.lid}}</td>
					<td>{{item.lname}}</td>
					<td>{{item.lpwd}}</td>
					<td>{{item.laddress}}</td>
					<td><a href="#" @click="edit(item.lid)">编辑</a>&nbsp;<a href="#" @click="search(item.lid)">查看</a>&nbsp;
						<a href="#" @click="del(item.lid)">删除</a>
					</td>
				</tr>
				<tr>
					<!-- <td colspan="5" style="text-align:right">${list.pageIndex}/${list.pageCount}页<a href="javascript:void(0)" onclick="page(${list.pageIndex-1})">上一页</a><a href="javascript:void(0)" onclick="page(${list.pageIndex+1})">下一页</a></td> -->
					<td colspan="5"><div class="posi" id="pagenav"></div></td>
				</tr>
		</table>
</body>
</html>
<script src="/jquery-1.8.0.js"></script>
<script>
		
		var app = new Vue({
			el : '#center',
			data : {
				result : []
			}
		});
		
		//查询用户数据
		var getUserPageList = function(curr) {
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/showall/show",
				data : {
					index:curr || 1,
				//向服务端传的参数，此处只是演示
				},
				success : function(msg) {
					app.result = msg.pageList;
					laypage({
						cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.pageCount, //总页数
						first : true,
						last : true,
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getUserPageList(obj.curr);
							}
						}
					});
				},
			});
		}
		
		getUserPageList();
		
		//编辑用户事件
		var edit = function(id) {
			var i=layer.open({
				type : 2,
				title : '编辑用户',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/showall/search?opr=edit&lid='+id,
				end : function() {
					getUserPageList();
				}
			});
		}
		
		//查看用户事件
		var search = function(id) {
			layer.open({
				type : 2,
				title : '查看用户',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '1100px', '600px' ],
				content : '/showall/search?lid='+id,
				end : function() {
					getUserPageList();
				}
			});
		}
		
		//删除用户事件
		var del = function(id) {
			//询问框
			layer.confirm('您确定要删除么？', {
				btn : [ '是', '否' ]
			//按钮
			}, function() {
					//是
					$.ajax({
						type : "GET",
						dataType : "json",
						url : "/showall/del?lid="+id,
						data : {
							lid:id
						},
						success : function(msg) {
							getUserPageList();
							layer.msg('已经成功删除记录' + id,{icon:5});
						}
					});
		
			}, function() {
				//否
			});
		}
</script>
